<template>
  <window :softID="softID">
    <template v-slot:contain>
      <div class="finder-container">
        <div class="left">
          <div class="title" style="margin: 40px 0 10px 15px">个人收藏</div>
          <div class="silder">
            <el-button type="" size="small"> 隔空投送 </el-button>
            <el-button type="" size="small"> 最近使用 </el-button>
            <el-button type="" size="small"> 应用程序 </el-button>
            <el-button type="" size="small"> 桌面 </el-button>
            <el-button type="" size="small"> 文稿 </el-button>
            <el-button type="" size="small"> 下载 </el-button>
          </div>
          <div class="title" style="margin: 20px 0 10px 15px">位置</div>
          <div class="silder">
            <el-button size="small" bg="false"> iCloud云盘 </el-button>
          </div>
        </div>

        <div class="right">
          <div class="pathTool">
            <div>
              <button @click="BackHistoryList()">
                <img class="historyBtn" src="../../assets/file-icons/arr.png" />
              </button>
            </div>
            <div>
              <button @click="ForwardHistoryList()">
                <img
                  class="historyBtn"
                  style="transform: rotate(180deg)"
                  src="../../assets/file-icons/arr.png"
                />
              </button>
            </div>

            <div class="path"></div>

            <div class="search">
              <img
                src="../../assets/file-icons/search.png"
                alt=""
                style="transform: rotate(90deg)"
              />
              <!-- <input type="text" placeholder="search" @keydown.enter="searchStr($event)" /> -->
            </div>
          </div>

          <div class="content">
            <div class="fileContent">
              <div class="contentTitle">
                <span class="title1">名称</span>
                <span class="title2">修改日期</span>
                <span class="title3">类型</span>
                <span class="title4">大小</span>
              </div>
              <ul>
                <li
                  v-for="(item, index) in contentList"
                  :key="index"
                  @dblclick="goTargetPath(item)"
                  @contextmenu.prevent="rightShowSet(item)"
                >
                  <img
                    v-if="item.fileType == 8"
                    src="../../assets/file-icons/fileContent.png"
                  />
                  <img v-else src="../../assets/file-icons/txt.png" />
                  <div class="content1">
                    <span>{{ item.fileName }}</span>
                  </div>
                  <div class="content2">
                    <span>{{ item.updateTime }}</span>
                  </div>
                  <div class="content3">
                    <span>{{ item.fileType == 8 ? "文件夹" : "文本" }}</span>
                  </div>
                  <div class="content4" v-if="item.fileType != 8">
                    <span>{{ item.occupyLength }}B</span>
                  </div>
                </li>
              </ul>
              <span v-if="isShowNull" class="fileNull">此文件夹为空。</span>
              <div class="blank" @contextmenu.prevent="rightShowFile()"></div>
            </div>

            <div class="viewContent">asdad</div>
          </div>
        </div>
      </div>
    </template>
  </window>
</template>

<script>
export default {
  props: ["softID"],
  data() {
    return {
      files: [
        { name: "文件夹1" },
        { name: "文件夹2" },
        { name: "文件夹3" },
        { name: "文件夹4" },
        { name: "文件夹5" },
        { name: "文件夹6" },
        { name: "文件夹7" },
      ],
    };
  },
};
</script>

<style lang="scss" scoped>
.finder-container {
  display: flex;
  height: 100%;
}

.left {
  background-color: #e9d7e7;
  width: 120px;
  height: 100%;

  .title {
    font-weight: 100;
    font-size: 10pt;
  }

  .silder {
    width: 100%;
  }

  .el-button {
    display: flex;
    margin-left: 10px;
  }
}

.right {
  flex: 1;

  .pathTool {
    display: flex;
    align-items: center;
    width: 100%;
    height: 50px;
    padding: 0.5em 0.8em;
    background-color: #ffffff;

    .historyBtn {
      height: 1em;
      width: 1em;
      font-size: 1.4em;
      margin-right: 0.5em;
    }

    .historyBtn2 {
      height: 1em;
      width: 1em;
      font-size: 1em;
      margin-right: 0.5em;
    }

    .path {
      display: flex;
      align-items: center;
      padding: 0 0 0 0.5em;
      width: 60%;
      height: 100%;
      border: 1px solid #dddddd;

      img {
        width: 1em;
        height: 1em;
      }

      #input {
        width: 0;
        outline: none;
        border: 0;
        // font-size: 0.8em;
        margin-left: 0.5em;
      }

      #input:focus {
        width: 100%;
      }

      #input:focus + .path-content {
        display: none;
      }

      &-content {
        display: flex;
        align-items: center;
        height: 100%;
        font-size: 0.8em;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;

        span {
          // margin-left: 0.5em;
          height: 100%;
          flex-wrap: nowrap;
          overflow: hidden;
          display: flex;
          align-items: center;

          // padding: 4px;
          // &::after {
          //   content: '>';
          //   margin-left: 0.2em;
          // }
          .showOtherBrother {
            position: relative;
            font-style: normal;
            width: 1.2em;
            height: 1.2em;

            &:hover {
              transform: rotate(-90deg);
            }
          }
        }
      }
    }

    .path-item {
      display: flex;
      align-items: center;
      height: 100%;
      padding: 0 0.5em;
      user-select: none;

      &:hover {
        background: #e5f3ff;
      }
    }

    .search {
      display: flex;
      align-items: center;
      margin-left: 10px;
      padding: 0.6em 1em;
      flex: 1;
      height: 100%;
      border: 1px solid #dddddd;

      img {
        width: 0.8em;
        height: 0.8em;
      }

      input {
        outline: none;
        width: 100%;
        border: 0;
        font-size: 0.8em;
        padding-left: 0.8em;
      }
    }
  }

  .fileContent {
    width: 70%;
    height: 100%;
    border-right: 2px ridge gray;
    ul {
      justify-content: flex-start;
      align-content: flex-start;
      flex-flow: wrap;
      overflow-y: scroll;

      list-style: none;
      width: 100%;
      height: 100%;
      margin: 0;
      padding: 0.5em 1em 1em 1em;

      li {
        display: flex;
        align-items: center;
        font-size: 0.8em;
        width: 100%;
        // height: 2em;
        padding: 0.3em 0;

        img {
          width: 1.2em;
          height: 1.2em;
        }

        &:hover {
          background: #e5f3ff;
        }
      }
    }
  }
}

.contentTitle {
  font-size: 0.8em;
  color: #4c6070;
  padding-left: 1em;
}

.title1 {
  border-right: 0.1em solid #e5e5e5;
  padding: 0.4em 10em 0.4em 0em;
  align-items: center;
  user-select: none;
}

.title2 {
  border-right: 0.1em solid #e5e5e5;
  padding: 0.4em 10em 0.4em 0.4em;
  user-select: none;
}

.title3 {
  border-right: 0.1em solid #e5e5e5;
  padding: 0.4em 5em 0.4em 0.4em;
  user-select: none;
}

.title4 {
  border-right: 0.1em solid #e5e5e5;
  padding: 0.4em 3em 0.4em 0.4em;
  user-select: none;
}

.content1 {
  width: 11.1em;
  user-select: none;
}

.content2 {
  width: 14.4em;
  color: #6d6d6d;
  user-select: none;
}

.content3 {
  width: 9.3em;
  color: #6d6d6d;
  user-select: none;
}

.content4 {
  width: 3em;
  color: #6d6d6d;
  text-align: right;
  user-select: none;
}

.fileNull {
  color: #6d6d6d;
  font-size: 0.8em;
  margin: 17em;
}

html.dark {
  .context-menu {
    background: #111;

    * {
      color: #e0e0e0;
    }

    li {
      &:hover {
        background: #333;
      }

      .sub {
        background: #111;

        li.selected::before {
          background: #e0e0e0;
        }
      }
    }
  }
}

.context-menu {
  z-index: 9999;
  display: none;
  flex-direction: column;
  width: 210px;
  padding: 5px 0;
  position: absolute;
  top: 150px;
  left: 150px;
  background: #f8f8f8;
  border: 1px solid rgba(0, 0, 0, 0.4);
  box-shadow: 5px 5px 3px -3px #8e8e8e;

  &.show {
    display: flex;
  }

  img {
    width: 1.2em;
    height: 1.2em;
  }

  li {
    position: relative;

    button {
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 26px;
      width: 100%;
      padding: 0 0 0 30px;
      text-align: left;
      font-size: 12px;
    }

    .showOtherBrother {
      position: relative;
      font-style: normal;
      width: 1.4em;
      height: 1.4em;
      margin-right: 0.3em;
      // &:hover {
      //   transform: rotate(90deg);
      // }
    }

    &:hover,
    &:focus {
      background: #ccc;

      .sub {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
      }
    }

    &.border-top {
      margin-top: 3px;
      padding-top: 3px;
      border-top: 1px solid rgba(0, 0, 0, 0.2) !important;
    }

    .sub {
      z-index: 100;
      flex-direction: column;
      width: 150px;
      padding: 5px 0;
      position: absolute;
      top: 0;
      left: 98%;
      background: #f8f8f8;
      border: 1px solid rgba(0, 0, 0, 0.4);
      box-shadow: 5px 5px 3px -3px #8e8e8e;
      opacity: 0;
      visibility: hidden;
      transform: translateY(4px);
      transition: 250ms;

      li {
        position: relative;

        button {
          padding: 0 30px;
        }

        &.selected {
          &::before {
            content: "";
            position: absolute;
            top: 50%;
            left: 15px;
            transform: translateY(-50%);
            width: 5px;
            height: 5px;
            border-radius: 50%;
            background: black;
          }
        }

        &.border-top {
          margin-top: 3px;
          padding-top: 3px;
          border-top: 1px solid rgba(0, 0, 0, 0.2) !important;
        }
      }
    }
  }
}

.blank {
  width: 100%;
  height: 80em;
}

.content {
  display: flex;
}
</style>
